<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
      <el-collapse-item title="确认单明细" name="2">
				<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="" prop="shipperName" class="top">
								<BaseTable
									:data="formData.sureData"
									:columns="tableColumn"
									:tableHeight="150"
									:pagination="false"
								></BaseTable>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
			<el-collapse-item title="费用信息" name="3">
				<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="" prop="shipperName" class="top">
								<el-card class="bgcard">合计金额 ： {{ totalAmount  | formatMoney }}</el-card>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="" prop="shipperName" class="top">
								<BaseTable
									:data="formData.chargingData"
									:columns="tableColumn1"
									:tableHeight="300"
									:pagination="false"
								></BaseTable>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public'
import api from '@/api/billingSettlementSys/sendCost/index'
export default {
  name: 'settlement',
  components: { BaseTable },
  props: {
    // 表单验证规则
    rules: {
      type: Object
    },
    customerData: {
      type: Array,
      default: () => []
    },
    clickRow: {
      type: Object
    },
    isGet: {
      typeof: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeNames: ['2', '3'],
      formData: {
        sureData: [], // 确认单信息
        chargingData: [] // 费用信息
      }, // from
      compData: [],
      tableColumn: [
        { prop: 'orderNo', label: '订单编号' },
        { prop: 'truckNo', label: '车牌号' },
        { prop: 'batch', label: '批次' },
        { prop: 'quantity', label: '件数' },
        { prop: 'packages', label: '包数' },
        { prop: 'volume', label: '方量' }
      ],
      tableColumn1: [
        // 结算明细
        // table表头
        { prop: 'rateItemName', label: '费目' },
        { prop: 'unitName', label: '计量单位' },
        { prop: 'rate', label: '单价', width: 100 },
        { prop: 'quantity', label: '数量', width: 100 },
        { prop: 'amount', label: '金额', width: 100, isMoney: true },
        { prop: 'tax', label: '税率', width: 100 },
        { prop: 'taxAmount', label: '税额', width: 100, isMoney: true }
      ],
      totalAmount: 0 // 总计金额
    }
  },
  watch: {
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight - 160
    }
  },
  mounted() {
    this.getComp()
  },
  methods: {
    /**
		 * 获取业务单元
		 */
    async getComp() {
      const res = await publicapi.getListComp()
      this.compData = res.data.data
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";
[v-cloak] {
	display: none;
}
</style>
